import { px2rem } from "@/assets/global-style";
import styled from "styled-components";

export const Wrapper =styled.div`
    height: ${px2rem(80)};
    margin: ${px2rem(16)} ${px2rem(8)} 0 ${px2rem(8)};
    display: flex ;
    align-items: center;
    justify-content: space-around;
    .course_img_wrapper{
        padding: 0 ${px2rem(8)};
        width: ${px2rem(110)};
        height: ${px2rem(80)};
        .course_img{
            width: 100%;
            height: 100%;
            border-radius: ${px2rem(8)};
            object-fit: cover;
        }
    }
    .desc_wrapper{
        flex: 1;
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        .desc_top{
            .title{
                width: ${px2rem(240)};
                height: ${px2rem(20)};
                font-size: ${px2rem(16)};
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: 400;
            }
            .time{
                padding: ${px2rem(8)} 0;
                font-size: ${px2rem(14)};
                color: #a0a0a0;
            }
        }
        .desc_botoom{
            .desc_text{
                font-size: ${px2rem(14)};
                color: #a0a0a0;
            }
            .desc_label{
                font-size: ${px2rem(14)};
                color: #1fa774;
                background-color: #d6f8eb;
            }
        } 
    }
`